<template>
  <a-flex justify="flex-end" gap="middle" class="ToolBar">
    <a-button @click="loadBackups">{{ $t("104") }}</a-button>
    <a-button type="primary" @click="backup">创建备份</a-button>
  </a-flex>
  <a-table :columns="cols" :data-source="lstBackup" bordered size="small">
  </a-table>
</template>
<script setup>
import { onMounted, reactive } from "vue";
import CommonDefine from "@/component/CommonDefine";
import { useI18n } from "vue-i18n";
import Utils from "@/component/Utils";

const { t } = useI18n();

const cols = [
  {
    title: t("219"),
    dataIndex: "id",
  },
  {
    title: t("220"),
    dataIndex: "ts",
  },
  {
    title: t("221"),
    dataIndex: "size",
  },
  {
    title: "",
    dataIndex: "_action",
  },
];

const lstBackup = reactive([]);

const loadBackups = () => {
  lstBackup.splice(0, lstBackup.length);
  CommonDefine.apiGetArm("/api-admin/db/list-backups", (d) => {
    d.forEach((element) => {
      element.size = Utils.file_size_label(element.size);
      lstBackup.push(element);
    });
  });
};

const backup = () => {
  CommonDefine.apiPostArm("/api-admin/db/backup", null, (d) => {
    CommonDefine.alert(t("222"));
  });
};

onMounted(() => {
  loadBackups();
});
</script>
